<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>溢出文字省略号提示</title>
    <style>
      /* 单行文字溢出时 */
      .only {
        width: 100px;
        height: 100px;
        margin: 100px auto;
        background-color: skyblue;
        /* 即使文字显示不开也必须一行内显示 */
        white-space: nowrap;
        /* 隐藏溢出文字 */
        overflow: hidden;
        /* 溢出的部分用省略号表示 */
        text-overflow: ellipsis;
      }
      /* 多行文字溢出 */
      /* overflow:hidden;
      text-overflow:ellipsis;
      弹性伸缩盒子模型显示
      display:-webkit-box;
      限制在一个块元素显示的文本的行数
      -webkit-line-clamp:2;
      设置或检索伸缩盒对象的子元素的排列方式*
      -webkit-box-orient:vertical; */
    </style>
  </head>
  <body>
    <div class="only">
      少年听雨歌楼上。红烛昏罗帐。壮年听雨客舟中。江阔云低、断雁叫西风。
      而今听雨僧庐下。鬓已星星也。悲欢离合总无情。一任阶前、点滴到天明。
    </div>
  </body>
</html>
